<template>
  <div class="shop-serach">
    <div class="serach-header">
      <div class="serach-bar">
        <div style="height: 100%">
          <span class="iconfont icon-search"></span>
          <input
            type="text"
            placeholder="搜索商家、商品名称"
            v-model="serachVal"
          />
        </div>
      </div>
    </div>
    <!-- 搜索建议列表 -->
    <div class="suggesst" v-show="suggestList">
      <div
        class="suggesst-item"
        v-for="(item, index) in suggestList"
        :key="index"
        @click="goShop(item.id)"
      >
        <div class="s-left">
          <span class="iconfont icon-search"></span>
        </div>
        <div class="s-right">
          <p class="s-right-title">{{ item.name }}</p>
          <p class="address">{{ item.address }}</p>
        </div>
      </div>
    </div>
    <!-- 搜索建议列表 -->
    <div class="content" v-show="!serachVal.length">
      <div class="serach-title">
        <div class="serach-title-content">
          <p>历史搜索</p>
          <img
            src="https://img.alicdn.com/tfs/TB1iHy8lGL7gK0jSZFBXXXZZpXa-12-14.svg"
            alt=""
          />
        </div>
        <div class="serach-history">
          <span>大润发</span>
          <span>大润发</span>
          <span>大润发</span>
          <span>大润发</span>
          <span>大润发</span>
          <span>大润发</span>
          <span>大润发</span>
          <span>大润发</span>
          <span>大润发</span>
        </div>
      </div>
      <div style="position: relative">
        <div class="content-scroll">
          <div class="scroll-item">
            <div class="scroll-title">热搜榜</div>
            <ul>
              <li>
                <router-link class="scroll-item-box" :to="'/home'">
                  <img
                    src="https://gw.alicdn.com/tfs/TB1eqnW47L0gK0jSZFAXXcA9pXa-150-124.jpg"
                    alt=""
                  />
                  <div class="scroll-item-right">
                    <p class="food-name">凉面快到碗里来</p>
                    <p class="food-sales">月销</p>
                  </div>
                  <span style="color: rgb(2, 182, 253); margin-left: 10px">
                    - 热</span
                  >
                </router-link>
              </li>
              <li>
                <router-link class="scroll-item-box" :to="'/home'">
                  <img
                    src="https://gw.alicdn.com/tfs/TB1eqnW47L0gK0jSZFAXXcA9pXa-150-124.jpg"
                    alt=""
                  />
                  <div class="scroll-item-right">
                    <p class="food-name">凉面快到碗里来</p>
                    <p class="food-sales">月销</p>
                  </div>
                  <span style="color: rgb(2, 182, 253); margin-left: 10px">
                    - 热</span
                  >
                </router-link>
              </li>
              <li>
                <router-link class="scroll-item-box" :to="'/home'">
                  <img
                    src="https://gw.alicdn.com/tfs/TB1eqnW47L0gK0jSZFAXXcA9pXa-150-124.jpg"
                    alt=""
                  />
                  <div class="scroll-item-right">
                    <p class="food-name">凉面快到碗里来</p>
                    <p class="food-sales">月销</p>
                  </div>
                  <span style="color: rgb(2, 182, 253); margin-left: 10px">
                    - 热</span
                  >
                </router-link>
              </li>
            </ul>
          </div>
          <div class="scroll-item">
            <div class="scroll-title">热搜榜</div>
            <ul>
              <li>
                <router-link class="scroll-item-box" :to="'/home'">
                  <img
                    src="https://gw.alicdn.com/tfs/TB1eqnW47L0gK0jSZFAXXcA9pXa-150-124.jpg"
                    alt=""
                  />
                  <div class="scroll-item-right">
                    <p class="food-name">凉面快到碗里来</p>
                    <p class="food-sales">月销</p>
                  </div>
                  <span style="color: rgb(2, 182, 253); margin-left: 10px">
                    - 热</span
                  >
                </router-link>
              </li>
              <li>
                <router-link class="scroll-item-box" :to="'/home'">
                  <img
                    src="https://gw.alicdn.com/tfs/TB1eqnW47L0gK0jSZFAXXcA9pXa-150-124.jpg"
                    alt=""
                  />
                  <div class="scroll-item-right">
                    <p class="food-name">凉面快到碗里来</p>
                    <p class="food-sales">月销</p>
                  </div>
                  <span style="color: rgb(2, 182, 253); margin-left: 10px">
                    - 热</span
                  >
                </router-link>
              </li>
              <li>
                <router-link class="scroll-item-box" :to="'/home'">
                  <img
                    src="https://gw.alicdn.com/tfs/TB1eqnW47L0gK0jSZFAXXcA9pXa-150-124.jpg"
                    alt=""
                  />
                  <div class="scroll-item-right">
                    <p class="food-name">凉面快到碗里来</p>
                    <p class="food-sales">月销</p>
                  </div>
                  <span style="color: rgb(2, 182, 253); margin-left: 10px">
                    - 热</span
                  >
                </router-link>
              </li>
            </ul>
          </div>
          <div class="scroll-item">
            <div class="scroll-title">热搜榜</div>
            <ul>
              <li>
                <router-link class="scroll-item-box" :to="'/home'">
                  <img
                    src="https://gw.alicdn.com/tfs/TB1eqnW47L0gK0jSZFAXXcA9pXa-150-124.jpg"
                    alt=""
                  />
                  <div class="scroll-item-right">
                    <p class="food-name">凉面快到碗里来</p>
                    <p class="food-sales">月销</p>
                  </div>
                  <span style="color: rgb(2, 182, 253); margin-left: 10px">
                    - 热</span
                  >
                </router-link>
              </li>
              <li>
                <router-link class="scroll-item-box" :to="'/home'">
                  <img
                    src="https://gw.alicdn.com/tfs/TB1eqnW47L0gK0jSZFAXXcA9pXa-150-124.jpg"
                    alt=""
                  />
                  <div class="scroll-item-right">
                    <p class="food-name">凉面快到碗里来</p>
                    <p class="food-sales">月销</p>
                  </div>
                  <span style="color: rgb(2, 182, 253); margin-left: 10px">
                    - 热</span
                  >
                </router-link>
              </li>
              <li>
                <router-link class="scroll-item-box" :to="'/home'">
                  <img
                    src="https://gw.alicdn.com/tfs/TB1eqnW47L0gK0jSZFAXXcA9pXa-150-124.jpg"
                    alt=""
                  />
                  <div class="scroll-item-right">
                    <p class="food-name">凉面快到碗里来</p>
                    <p class="food-sales">月销</p>
                  </div>
                  <span style="color: rgb(2, 182, 253); margin-left: 10px">
                    - 热</span
                  >
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <home-content
      :shopData="shopData"
      v-show="!serachVal.length"
    ></home-content>
  </div>
</template>

<script>
import homeContent from "../components/home/homeCotent";
import { mapState } from "vuex";
import { getAllshop, serachShop } from "../api/api";
export default {
  components: {
    homeContent,
  },
  data() {
    return {
      shopData: [],
      serachVal: "",
      suggestList: [],
    };
  },
  methods: {
    goShop(id) {
      this.$router.push("/shop/" + id);
    },
  },
  watch: {
    serachVal(val) {
      //将获取到的值
      serachShop({ geohash: this.geoHash, keyword: val }).then((res) => {
        this.suggestList = res;
        if (res.status === 0) {
          this.suggestList = [];
        }
      });
    },
  },
  computed: {
    ...mapState(["geoHash"]),
  },
  created() {
    if (localStorage.getItem("state")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(localStorage.getItem("state"))
        )
      );
    }
    let hasharr = this.geoHash.split(",");
    getAllshop({
      latitude: hasharr[0],
      longitude: hasharr[1],
      offset: 100,
    }).then((res) => {
      this.shopData = res;
    });
  },
};
</script>

<style lang="scss" scoped>
.shop-serach {
  .serach-header {
    box-sizing: border-box;
    position: sticky;
    top: 0px;
    z-index: 9;
    padding: 0.266667rem;
    background-color: #fff;
    .serach-bar {
      width: 100%;
      height: 0.8rem;
      background-color: #fff;
      border-radius: 0.466667rem;
      border: 1px solid #50b8fd;
      padding: 0 0.32rem;
      box-sizing: border-box;
      input {
        border: none;
        width: 80%;
        height: 100%;
        font-size: 0.373333rem;
        padding: 0 0.32rem;
        &::placeholder {
          color: #999;
        }
      }
    }
  }
  .suggesst {
    width: 100%;
    padding: 0 0.32rem;
    box-sizing: border-box;
    .suggesst-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      box-sizing: border-box;
      padding: 0.266667rem 0;
      border-bottom: 1px solid #f5f5f5;
      .s-left {
        color: #999;
        padding-top: 0.2rem;
      }
      .s-right {
        flex: 1;
        padding-left: 0.32rem;
        padding-bottom: 0.066667rem;
        p {
          font-size: 0.373333rem;
          color: #999;
        }
        .s-right-title {
          font-size: 0.426667rem;
          padding-top: 0.066667rem;
          color: #333;
        }
      }
    }
  }
  .content {
    padding: 0 0.32rem;
    .serach-title {
      .serach-title-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          font-size: 0.426667rem;
        }
      }
      .serach-history {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 0.32rem;
        span {
          font-size: 0.373333rem;
          display: inline-block;
          color: #191919;
          background-color: #f5f5f5;
          padding: 0.16rem 0.32rem;
          border-radius: 0.4rem;
          margin-right: 0.2rem;
          margin-bottom: 0.2rem;
        }
      }
    }
    .content-scroll {
      margin-top: 0.266667rem;
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      height: 6.186667rem;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      box-sizing: border-box;
      &::-webkit-scrollbar {
        width: 0 !important;
      }
      .scroll-item {
        width: 6.346667rem;
        background-color: #fff;
        border: 1px solid #cdf1ff;
        flex: 1 0 auto;
        margin-right: 0.426667rem;
        border-radius: 0.266667rem;
        padding: 0.32rem;
        background-image: linear-gradient(
          rgba(223, 245, 255, 0.6) 4%,
          rgba(223, 245, 255, 0) 99%
        );
        overflow: hidden;
        padding-bottom: 0.666667rem;
        .scroll-title {
          color: #00acf0;
          font-size: 0.426667rem;
          font-weight: bold;
          margin-bottom: 0.32rem;
        }
        .btn {
          text-align: center;
          padding-top: 0.32rem;
          color: #999;
          font-size: 0.32rem;
          position: absolute;
          left: 0;
          bottom: 0.2rem;
          display: block;
          width: 100%;
          z-index: 99;
        }
        ul {
          li {
            margin-bottom: 0.32rem;
            .scroll-item-box {
              width: 100%;
              box-sizing: border-box;
              display: flex;
              color: #999;
              position: relative;
              &::before {
                content: "";
                display: block;
                width: 0.373333rem;
                height: 0.373333rem;
                background: url("https://img.alicdn.com/tfs/TB15Iwu2.Y1gK0jSZFCXXcwqXXa-42-42.png")
                  no-repeat center;
                background-size: contain;
                position: absolute;
                top: 0;
                left: 0;
              }
              .scroll-item-right {
                padding-left: 0.32rem;
                color: #333;
                display: flex;
                font-size: 0.373333rem;
                flex-direction: column;
                justify-content: space-between;
                .food-sales {
                  font-size: 0.32rem;
                  color: #999;
                }
              }
              img {
                width: 1.173333rem;
                height: 1.173333rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>